import styled from 'styled-components';
import Layout from '../Layout';
import { NavLink, useLocation } from 'react-router-dom'; // 使用 NavLink 替代 Link
import { MaterialStore, useMaterialStore } from '@/stores/useMaterial';
import { useEffect } from 'react';
import { Material } from '@/types';

// 创建样式化组件
const Container = styled.div``;

interface PageProps {}

const SelectGroupView: React.FC<PageProps> = () => {
  const comPath = `/materials/select-group`;
  const location = useLocation();
  const store = useMaterialStore as unknown as MaterialStore;

  useEffect(() => {
    console.log(location);
    const pathParts = location.pathname.split('/');
    const currentComponentName = pathParts[pathParts.length - 1];
    if (store.currentMaterialCom !== currentComponentName) {
      console.log('切换组件', currentComponentName);
      store.setCurrentMaterialCom(currentComponentName as Material);
    }
    // 是否组件市场
    // const isMaterials = location.pathname.startsWith('/materials');
    // if (isMaterials) {

    // }
  }, [location, store]);

  return (
    <Container className="">
      <Layout>
        {/* <nav>
          <ul>
            <li>
              <NavLink to="/a" activeClassName="active">
                a页面
              </NavLink>
            </li>
            <li>
              <NavLink to="/b" activeClassName="active">
                b页面
              </NavLink>
            </li>
          </ul>
        </nav> */}

        {/* 使用 NavLink 并正确声明 isActive 类型 */}
        <NavLink
          className={({ isActive }: { isActive: boolean }) =>
            isActive ? 'link-item-active link-item mb-4' : 'link-item mb-4'
          }
          to={`${comPath}/single-select`}>
          单选题
        </NavLink>

        <NavLink
          className={({ isActive }: { isActive: boolean }) =>
            isActive ? 'link-item-active link-item mb-4' : 'link-item mb-4'
          }
          to={`${comPath}/mu-select`}>
          多选题
        </NavLink>

        <NavLink
          className={({ isActive }: { isActive: boolean }) =>
            isActive ? 'link-item-active link-item mb-4' : 'link-item mb-4'
          }
          to={`${comPath}/option-select`}>
          下拉选择
        </NavLink>

        <NavLink
          className={({ isActive }: { isActive: boolean }) =>
            isActive ? 'link-item-active link-item mb-4' : 'link-item mb-4'
          }
          to={`${comPath}/single-pic-select`}>
          图片单选
        </NavLink>

        <NavLink
          className={({ isActive }: { isActive: boolean }) =>
            isActive ? 'link-item-active link-item mb-4' : 'link-item mb-4'
          }
          to={`${comPath}/mu-pic-select`}>
          图片多选
        </NavLink>
      </Layout>
    </Container>
  );
};

export default SelectGroupView;
